<template>
  <div class="wrap">
    <div class="null_content">
      <div class="f">
        <div class="crumbs-1">
          <div class="f-content">
            <a @click="openHomePage">首页 </a
            ><img :src="require('@/assets/df4s4.png')" />
            <a @click="openNewstPage">新闻中心</a
            ><img v-bind:src="require('@/assets/df4s4.png')" />
            <a>行情列表</a>
          </div>
        </div>
        <div class="page-main">
          <div class="f-content">
            <div class="ul-1" v-for="(item, index) in newsList" :key="index">
              <a class="li" @click="newsDetailTo(item.id)">
                <!-- <img :src="item.imageUrl" class="img" /> -->
                <div class="left">
                  <h3 class="title">{{ item.title }}</h3>
                  <h4 class="date">{{ item.date }}</h4>
                  <!-- <p>
                    {{ item.desc }}
                  </p> -->
                </div>
                <div class="both"></div>
              </a>
            </div>
            <div href="javascript:void(0);" class="button-1">
              <span v-on:click="click" class="look-more">查看更多</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from  "@/utils/HttpUtils";
export default {
  data() {
    return {
      narrow: require("@/assets/df4s4.png"),
      newsList: [
        {
          id: "1",
          title: "今日铝价格查询_各地最新铝市场报价（2021年05月22日）",
          date: "2021.05.19",
        },
        {
          id: "2",
          title: "今日铝价格查询_各地最新铝市场报价（2021年05月22日）",
          date: "2021.05.19",
        },
        {
          id: "3",
          title: "今日铝价格查询_各地最新铝市场报价（2021年05月22日）",
          date: "2021.05.19",
        },
      ],
      pageIndex: 0,
    };
  },
  methods: {
    newsDetailTo(id) {
      console.log("打开文章id :" + id);
      this.$router.push({ path: "/offer-detail", query: { id: id } });
    },

    openHomePage() {
      this.$router.push({ name: "home" });
    },
    openNewstPage() {
      this.$router.push({ name: "news" });
    },
    click() {
      console.log("加载下一页数据。。。");
      //请求后端分页接口

      this.getRequestPage(1);
    },
    //请求分页接口
    getRequestPage(pageNo) {
      let pageUrl = "/news/news-list";
      let params = {};
      pageNo = this.pageIndex;
      console.log("请求页码:" + pageNo);
      params.pageNo = pageNo;
      params.pageSize = 10;
      var data = axios.get(pageUrl, params);
      console.log(data);
      this.newsList.push();
      this.pageIndex = this.pageIndex + 1;
    },
  },
  mounted() {
    this.pageIndex = 1;
    this.getRequestPage(this.pageIndex);
  },
};
</script>

<style scoped>
@import "~@/assets/css/base.css";
@import "~@/assets/css/index.css";
@import "~@/assets/css/base-2.css";
@import "~@/assets/css/media.css";
.look-more {
  cursor: pointer;
}

</style>